<template>
  <div class="subject">

    <!--盒子-->
    <div class="box">

      <!--单个课程盒子-->
      <div class="course-box"
           v-for="(obj,i) in subjectList"
           @click="gotoCourse(obj)">
        <!--课程图片-->
        <div class="img-box">
          <img :src="obj.subjectDetails.subPic">
        </div>
        <!--课程名称-->
        <div class="name">
          {{obj.subjectName}}
        </div>

        <!--简介-->
        <div class="introduction">
          {{obj.subjectDetails.subIntroduction}}
        </div>
        <!--其他-->
        <div class="other-box">
          <div class="vip">
            <span v-if="obj.subjectDetails.vip==1" class="yes">会员</span>
            <span v-if="obj.subjectDetails.vip==0" class="no">免费</span>
          </div>
          <div class="view">

          </div>
          <div class="score">
            {{obj.subjectDetails.subScore}}
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "",
    components: {},
    data() {
      return {
        //课程列表
        subjectList: [],
      }
    },
    methods: {
      //去到课时页面
      gotoCourse:function(obj){
        //跳转
        let {href} = this.$router.resolve({
          name: "CourseList",
          query: {
            sid: obj.subjectId
          }
        });
        window.open(href, '_blank');
      },
      init: function () {
        this.axios.get(`/course/subject/subject/details`)
          .then((resp) => {
            if (resp.data.flag) {
              this.subjectList = resp.data.data
            }
          })
      }
    },
    mounted() {
      this.init()
    }
  }
</script>

<style scoped>
  .subject {
    width: 1200px;
    min-height: calc(100vh - 70px);
    margin: 0 auto;
  }

  .subject .box {
    overflow: hidden;
  }

  /*课程*/
  .subject .box .course-box {
    float: left;
    width: 216px;
    margin: 40px 0px 0px 30px;
    cursor: pointer;
  }

  .box .course-box:nth-child(5n+1) {
    margin-left: 0px;
  }

  /*img盒子*/
  .subject .box .course-box .img-box {
    width: 216px;
    height: 120px;
    border-radius: 6px;
  }

  /*课程图片*/
  .subject .box .course-box img {
    display: inline-block;
    width: 208px;
    height: 112px;
    margin-top: 4px;
    margin-left: 4px;
    border-radius: 6px;
  }

  .subject .box .course-box img:hover {
    display: inline-block;
    width: 216px;
    height: 120px;
    margin-top: 0px;
    margin-left: 0px;
    border-radius: 6px;
  }

  /*课程名称*/
  .subject .box .course-box .name {
    width: 100%;
    height: 32px;
    font-size: 16px;
    line-height: 16px;
    color: #07111B;
    font-family: 微软雅黑;
    font-weight: bold;
  }

  /*课程名称*/
  .subject .box .course-box .name:hover {
    width: 100%;
    height: 32px;
    font-size: 16px;
    line-height: 16px;
    color: #F20A0A;
    font-family: 微软雅黑;
    font-weight: bold;
  }

  /*简介*/
  .subject .box .course-box .introduction {
    width: 100%;
    height: 32px;
    margin-top: 5px;
    font-size: 14px;
    color: rgba(135, 135, 135, 1);;
    line-height: 16px;

    /*溢出省略...*/
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /*其他*/
  .subject .box .course-box .other-box {
    width: 100%;
    overflow: hidden;
  }

  /*vip*/
  .subject .box .course-box .other-box .vip {
    float: left;

  }

  .subject .box .course-box .other-box .vip .yes {
    font-size: 14px;
    color: #ffac41;
    font-weight: bolder;
  }

  .subject .box .course-box .other-box .vip .no {
    font-size: 14px;
    color: #F20A0A;
    font-weight: bolder;
  }

  .subject .box .course-box .other-box .view {
    float: left;
  }

  .subject .box .course-box .other-box .score {
    float: right;
  }
</style>
